<template>
  <div v-if="hasFilmData">
    <ca-header isBackShow>
      <h2>{{film.name}}</h2>
    </ca-header>
    <img :src="film.cover.origin" alt="">
    <p class="desc">{{film.synopsis}}</p>
    <div class="button-area">
      <mt-button
        @click.native.stop="addToCart({
          id: film.id,
          title: film.name,
          url: film.poster.origin
        })"
        type="primary"
      >加入购物车</mt-button>
    </div>
  </div>
</template>

<script>
import CaHeader from '@/components/CaHeader';
import { getDetail } from '@/services';
import { mapMutations } from 'vuex';

export default {
  name: 'detail',
  components: {
    CaHeader,
  },
  data() {
    return {
      film: {},
    };
  },
  computed: {
    hasFilmData() {
      return Object.keys(this.film).length > 0;
    },
  },
  mounted() {
    getDetail(this.$route.params.id)
      .then((resp) => {
        this.film = resp.film;
      });
  },
  methods: {
    ...mapMutations(['addToCart']),
  },
};
</script>

<style scoped>
img {
  max-width: 100%;
}
.desc {
  padding: 15px;
}
.button-area {
  text-align: center;
}
</style>
